<template>
  <div class="bottom-menu">
      <div class="menu-item">
          <div class="tag" @click="$emit('active_menu_nth', 1)">
              <span>留祝福</span>
          </div>
      </div>
      <div class="menu-item">
          <div class="tag" @click="$emit('active_menu_nth', 2)">
              <span>送礼物</span>
          </div>
      </div>
<!--      <div class="menu-item">
          <div class="tag">
              <span>塞红包</span>
          </div>
      </div>-->
      <router-link to="/">
          <div class="menu-item">
              <div class="tag">
                  <span>返回</span>
              </div>
          </div>
      </router-link>
  </div>
</template>

<script>
export default {
    name: 'bottom-menu-bless',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .bottom-menu { position: fixed!important; display:flex; justify-items:center; align-items: center; justify-content: center; height: 6.6rem; width: 100%; bottom: 0;z-index: 666;}
    .bottom-menu .menu-item { text-decoration: none!important; padding: 0.3rem 0.6rem; margin: 0 1rem; display:inline-flex; justify-items:center; align-items: center; justify-content: center; border-radius: 10%; border: #de5b52 1px solid; background: #fff0ef; font-size:1.6rem; color: #de5b52;opacity: 0.9;z-index: 666;}
    .bottom-menu a {text-decoration: none!important;z-index: 666;}
</style>
